<template>
    <div id="register-box">
        <div class="reg-content txtcolor">
            <div class="title ft30">注册</div>
            <div class="tab">
                <span :class='{active:isMb}' @click="setIsMb(true)">手机号注册</span>
                <!-- <span :class="{active:!isMb}" @click="setIsMb(false)">邮箱注册</span> -->
            </div>
            <div class="step-one" v-show="!codeTrue">

                <div class="account-box">
                    <div class="tip ft12 txtgray" v-if="isMb">请输入手机号</div>
                    <div class="tip ft12 txtgray" v-if="!isMb">请输入邮箱</div>
                    <input type="text" v-model="account">
                </div>
                    <div class="tip ft12 txtgray" style="margin-bottom:10px">请输入验证码</div>
                <div class="code-box">
                    <input type="text" v-model="code" class="code">
                    <button type='button' class="code-btn curPer" @click="sendCode">发送验证码</button>
                </div>
                <button class="confirm-btn curPer" @click="checkCode" type="button">确认</button>
            </div>
            <div class="setpass" v-show="codeTrue">
                <div class="title ft30">设置密码</div>
                <div class="pwd-box">
                    <div class="tip ft12 txtgray">请输入密码</div>
                    <input type="password" v-model="pwd" class="pwd-input" placeholder="密码在6-16位之间">
                </div>
                <div class="repwd-box">
                    <div class="tip ft12 txtgray">请再次输入密码</div>
                    <input type="password" v-model="repwd" class="repwd-input" placeholder="请再次输入密码">
                </div>
                <div class="invite-box">
                    <div class="tip ft12 txtgray">邀请码</div>
                    <input type="text" v-model="invite" class="invite-input" placeholder="请输入邀请码">
                </div>
                <button type="button" @click="register" class="reg-btn confirm-btn curPer">确认</button>
            </div>
            </div>
    </div>
</template>

<script>
export default {
  name:'regster',
  data() {
    return {
      codeTrue: false,             //验证码是否正确
      isMb: true,                  //是否为手机注册
      account: "",                //用户名
      pwd: "",                    //密码
      repwd: "",                  //重复密码
      code: "",                   //验证码
      invite: "",                  //邀请码
      timer: "",                  //倒计时timer
    };
  },
  created() {
    var invite=this.get_all_params().extension_code;
    if(invite){
      this.invite=invite;
    }
  },
  methods: {
    get_all_params() {
      var url = location.href;
      var nameValue;
      var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
      var paraObj = {};
      for (var i = 0; nameValue = paraString[i]; i++) {
          var name = nameValue.substring(0, nameValue.indexOf("=")).toLowerCase();
          var value = nameValue.substring(nameValue.indexOf("=") + 1, nameValue.length);
          if (value.indexOf("#") > -1) {
              value = value.split("#")[0];
          }
          paraObj[name] = decodeURI(value);
      }
      return paraObj;
    },
   
    // 切换注册方式
    setIsMb(boo) {
      this.account = "";
      this.pwd = "";
      this.repwd = "";
      this.code = "";
      this.invite = "";
      this.isMb = boo;
      this.codeTrue = false;
      this.showList = false;
      clearInterval(this.timer);
      var codeBtn = document.querySelector(".code-btn");
      codeBtn.disabled = false;
      codeBtn.innerHTML = "验证码";
    },
    // 发送验证码
    sendCode(e) {
      let isMb = this.isMb;
      let url = "sms_send";
      if (this.account == "") {
        layer.msg("请输入账号");
        return;
      } else if (e.target.disabled) {
        return;
      } else if (isMb) {
        var reg = /^1[3456789]\d{9}$/;
        // if (!reg.test(this.account)) {
        //   // layer.msg("您输入的手机号不符合规则");
        //   // return;
        // }
      } else if (!isMb) {
        var emreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!emreg.test(this.account)) {
          layer.msg("您输入的邮箱不符合规则");
          return;
        } else {
          url = "sms_mail";
        }
      } else {
      }
      var time = 60;

      this.timer = setInterval(function() {
        e.target.innerHTML = time + "秒";
        e.target.disabled = true;
        if (time == 0) {
          clearInterval(this.timer);
          e.target.innerHTML = "验证码";
          e.target.disabled = false;
          return;
        }
        time--;
      }, 1000);
      let data = { user_string: this.account };

      this.axios({
        url: "/api/" + url,
        method: "post",
        data: data
      }).then(res => {
        layer.msg(res.data.message);
      });
    },
    // 验证验证码
    checkCode() {
      let code = this.code;
      if(this.account == ''){
        layer.msg('请输入账号');return;
      }
      else if (this.code == "") {
        layer.msg("请输入验证码");
        return;
      } else {
        let data = {};
        let url = "user/check_email";
        if (this.isMb) {
          data = { mobile_code: this.code };
          url = "user/check_mobile";
        } else {
          data = { email_code: this.code };
        }
        this.axios({
          url: "/api/" + url,
          method: "post",
          data: data
        }).then(res => {
          layer.msg(res.data.message);

          if (res.data.type == "ok") {
            this.codeTrue = true;
            this.getRegion("", "provinces");
          } else {
          }
        });
      }
    },
    // 注册
    register() {
      if (this.pwd == "") {
        layer.msg("请输入密码");
        return;
      }else if(this.pwd.length <6 || this.pwd.length >16){
        layer.msg('密码只能在6-16位之间');return;
      }
       else if (this.repwd == "") {
        layer.msg("请再次输入密码");
        return;
      } else if (this.pwd !== this.repwd) {
        layer.msg("两次输入的密码不一致");
        return;
      } else if(this.invite == '') {
        layer.msg("请输入邀请码");
        return;
      }
      var data = {};
      var isMb = this.isMb;
      data.type = isMb ? "mobile" : "email";
      data.user_string = this.account;
      data.code = this.code;
      data.password = this.pwd;
      data.re_password = this.repwd;
      data.extension_code = this.invite;
      this.axios({
        url: "/api/" + "user/register",
        data: data,
        method: "post"
      }).then(res => {
        layer.msg(res.data.message);
        if (res.data.type == "ok") {
          this.$router.push("/login");
        }
      });
    }
  }
};
</script>

<style lang='scss'>
#register-box {
  .tip {
    margin: 10px 0;
  }
  .reg-content {
    padding: 100px 100px;
    > div > div {
      margin: 10px 0 30px;
    }
    input {
      width: 520px;
      min-height: 46px;
      border: 1px solid #4e5b85;
      padding: 0 20px;
      color: #c7cce6;
      font-size: 14px;
      border-radius: 3px;
      background-color: #1e2235;
    }
    > .tab {
      margin: 20px 0 20px;
      span {
        margin: 0 20px;
      }
    }
    .code-box {
      width: 520px;
      height: 46px;
      background-color: #1e2235;
      border: 1px solid #4e5b85;
      input {
        border: none;
        height: 44px;
        min-height: 44px;
        width: 420px;
      }
      button {
        border: none;
        line-height: 43px;
        width: 93px;
        color: #c7cce6;
        border-left: 1px solid #4e5b85;
        background: #1e2235;
      }
    }
  }
  .reg-btn,
  .confirm-btn {
    line-height: 46px;
    width: 200px;
    margin: 20px 0 0;
    border: none;
    background: #7a98f7;
    color: #fff;
  }
  .area-box {
    position: relative;
    width: 520px;
    line-height: 44px;
    background-color: #1e2235;
    color: #c7cce6;
    text-align: center;
    height: 46px;
    .light {
      color: #7a98f7;
    }
    .area {
      display: flex;
      border: 1px solid #4e5b85;
      > div {
        flex: 1;
      }
      .city {
        border-left: 1px solid #4e5b85;
        border-right: 1px solid #4e5b85;
      }
    }
    .area-list {
      position: absolute;
      width: 520px;
      top: 46px;
      left: 0;
      display: flex;
      z-index: 999;
      > ul {
        flex: 1;
        background-color: #1e2235;
        height: 265px;
        overflow: scroll;
      }
      > ul::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>
